<h2>Why is this an issue?</h2>
<p>ARIA (Accessible Rich Internet Applications) attributes are used to enhance the accessibility of web content and web applications. These attributes
provide additional information about an element’s role, state, properties, and values to assistive technologies like screen readers.</p>
<p>This rule checks that when using the <code>role</code> property in DOM elements, its value is a valid non-abstract ARIA role.</p>
<p>This rule does not cover non-DOM elements, such as custom components.</p>
<h2>How to fix it</h2>
<p>Check that each element with a defined ARIA role has a valid non-abstract value.</p>
<pre data-diff-id="1" data-diff-type="noncompliant">
&lt;div role="meth" aria-label="a^{2} + b^{2} = c^{2}"&gt;
  a&lt;sup&gt;2&lt;/sup&gt; + b&lt;sup&gt;2&lt;/sup&gt; = c&lt;sup&gt;2&lt;/sup&gt;
&lt;/div&gt;
</pre>
<p>To fix the code use a valid value for the ARIA role attribute.</p>
<pre data-diff-id="1" data-diff-type="compliant">
&lt;div role="math" aria-label="a^{2} + b^{2} = c^{2}"&gt;
  a&lt;sup&gt;2&lt;/sup&gt; + b&lt;sup&gt;2&lt;/sup&gt; = c&lt;sup&gt;2&lt;/sup&gt;
&lt;/div&gt;
</pre>
<h2>Resources</h2>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/jsx-eslint/eslint-plugin-jsx-a11y">eslint-plugin-jsx-a11y</a> - Rule <a
  href="https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/aria-role.md">aria-role</a> </li>
  <li> MDN web docs - <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques">Using ARIA: Roles, states, and
  properties</a> </li>
  <li> MDN web docs - <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles">ARIA roles (Reference)</a> </li>
</ul>
<h3>Standards</h3>
<ul>
  <li> W3C - <a href="https://www.w3.org/TR/wai-aria-1.2/">Accessible Rich Internet Applications (WAI-ARIA) 1.2</a> </li>
</ul>
